import React, { useEffect, useState } from "react";
import * as echarts from 'echarts';
import { echartsOrder } from "../../../api/account";

export default function SaleOrder() {
    const [data, setData] = useState({});

    useEffect(() => {
        echartsOrder().then((res) => {
            setData(res.data.data);
        });
    }, []);

    useEffect(() => {
        if (data.date && data.source) {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '数据统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: data.source.map(item => item.type) // 从数据源获取图例信息
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.date
                },
                yAxis: {
                    type: 'value'
                },
                series: data.source.map(item => ({
                    name: item.type,
                    type: 'line',
                    stack: 'Total',
                    data: item.data
                }))
            };

            option && myChart.setOption(option);
        }
    }, [data]);

    return (
        <div className="app-content" style={{ width: '98%', height: '90%' }}>
            <div id="main" style={{ width: '100%', height: '100%' }}></div>
        </div>
    );
}

